<script lang="ts" setup>
import { defineProps } from 'vue'
defineProps(["picUrl", "name", "playcount", "id"])

</script>


<template>
    <div class="songItem">
        <router-link :to="`/SongListDetail/${id}`">
            <div class="imgWrap">
                <img class="itemBkImg" :src="`${picUrl}`" alt="">
                <div class="playBtn">
                    <img src="../../../assets/playimg.png" alt="">
                </div>
                <div class="playcount">
                    <span class="iconfont icon-24gl-play"></span>
                    <span>{{ parseInt(playcount) >= 10000 ? Math.floor(parseInt(playcount) / 10000) + '万' :
                        playcount
                    }}</span>
                </div>
            </div>
        </router-link>
        <p class="songListDesc" :title="`${name}`">{{ name }}</p>
    </div>
</template>


<style lang="scss" scoped>
.songItem {
    width: 18%;
    margin-bottom: 10px;

    .imgWrap {
        position: relative;

        .itemBkImg {
            width: 100%;
            height: 140px;
            max-height: 211px;
            border-radius: $borderRadius8;
        }

        .playBtn {
            display: inline-block;
            opacity: 0;
            position: absolute;
            right: 8px;
            bottom: 12px;
            width: 30px;
            height: 30px;
            background-color: $theme-white;
            border-radius: 50%;
            transition: .9s;

            img {
                position: absolute;
                top: 1px;
                right: 0;
                bottom: 0;
                left: 3px;
                margin: auto;
                width: 24px;
                height: 24px;
            }
        }

        .playcount {
            position: absolute;
            top: 0px;
            right: 8px;

            span {
                color: $theme-white;
                font-size: $font-size-xs;
            }
        }

        &:hover .playBtn {
            opacity: 1;
        }
    }

    .songListDesc {
        font-family: $textFont;
        font-size: $font-size-sm;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

@media screen and (max-width: 1100px) {
    .personalityRecommon .recommenSongList .everydayRecommen .songItem .songListDesc {
        font-size: $font-size-xs;
    }
}

// 歌单的描述信息
@media screen and (max-width: 1100px) {
    .songListDesc {
        font-size: $font-size-xs;
    }
}

/* // 歌单图片响应式设置 */
@media screen and (min-width: 1100px) {
    .itemBkImg {
        height: 150px !important;
    }
}

@media screen and (min-width: 1130px) {
    .itemBkImg {
        height: 157px !important;
    }
}

@media screen and (min-width: 1160px) {
    .itemBkImg {
        height: 162px !important;
    }
}

@media screen and (min-width: 1190px) {
    .itemBkImg {
        height: 164px !important;
    }
}

@media screen and (min-width: 1220px) {
    .itemBkImg {
        height: 170px !important;
    }
}

@media screen and (min-width: 1250px) {
    .itemBkImg {
        height: 176px !important;
    }
}

@media screen and (min-width: 1280px) {
    .itemBkImg {
        height: 182px !important;
    }
}

@media screen and (min-width: 1310px) {
    .itemBkImg {
        height: 188px !important;
    }
}

@media screen and (min-width: 1340px) {
    .itemBkImg {
        height: 194px !important;
    }
}

@media screen and (min-width: 1370px) {
    .itemBkImg {
        height: 200px !important;
    }
}

@media screen and (min-width: 1400px) {
    .itemBkImg {
        height: 206px !important;
    }
}

@media screen and (min-width: 1430px) {
    .itemBkImg {
        height: 210px !important;
    }
}
</style>
